<template>
  <div class="lottery-page">
    <y-tabs v-model="active" sticky :offsetTop="43" color="#007aff">
      <y-tab  title="双色球">
        <lottery-item :lottery="doubleColorBall" />
      </y-tab>

    </y-tabs>
    <van-tabs v-model="activeTab">
      <van-tab name="双色球">

      </van-tab>
      <van-tab name="快乐8">
        <lottery-item :lottery="happy8" />
      </van-tab>
      <van-tab name="福彩3D">
        <lottery-item :lottery="fc3d" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { defineComponent,ref ,onMounted} from 'vue';
import LotteryItem from './lottery-item.vue';
import {ballApi} from '@/api/business/ball/ball-api';


export default defineComponent({
  components: {
    LotteryItem,
  },
  setup() {
    const activeTab = ref('双色球');
    const doubleColorBallData = ref({});
    const happy8Data = ref(null);
    const fc3dData = ref(null);
    const qlcData = ref(null);

    const fetchData = async () => {
      doubleColorBallData.value = await ballApi.doubleColorBall();
      console.log(doubleColorBallData);
      happy8Data.value = await ballApi.happy8();
      console.log(happy8Data);
      fc3dData.value = await ballApi.fc3d();
      console.log(fc3dData);
    };

    onMounted(() => {
      fetchData();
    });



    return {
      activeTab,
      doubleColorBall: doubleColorBallData.value||{},
      happy8: happy8Data.value,
      fc3d: fc3dData.value,
      qlc: qlcData.value,
    };
  },
});
</script>

<style lang="scss">
.lottery-page {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
